<template>
  <div class="home">
 <main>
   <router-view></router-view>
 </main>
 <footer>
   <van-tabbar route>
  <van-tabbar-item 
  v-for="(item,index) in foot" 
  :key="index" 
  :to="`/home/${item.path}`"
   icon="home-o">{{item.meta.title}}</van-tabbar-item>
   </van-tabbar>
   </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foot: [
        {
          path: "shou",
          name: "Shou",
          meta: {
            title: "首页",
          },
        },
        {
          path: "classifg",
          name: "Classifg",
          meta: {
            title: "分类",
          },
        },
        {
          path: "shop",
          name: "Shop",
          meta: {
            title: "购物车",
          },
        },
        {
          path: "my",
          name: "My",
          meta: {
            title: "我的",
          },
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.home{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: palegreen;
  main{
    flex:1;
  }
  footer{
    width: 100%;
    height: 50px;
  }
    a {
    text-decoration: none;
  }
}
</style>